<template>
  <div class="page-search">
    <el-card>
      <template #header>
        <h3>高级检索</h3>
      </template>
      <!-- 头部表单区域 -->
      <my-form ref="formRef" v-bind="formConfig" v-model:formData="formData">
        <!-- <template #footer>
          <el-row class="footer">
            <el-button
              @click="resetFormData"
              type="primary"
              icon="el-icon-refresh-left"
              >重置</el-button
            >
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </el-row>
        </template> -->
      </my-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import MyForm from '@/base-ui/form'
import { watch, ref, onMounted } from '@vue/runtime-core'
import { Ref } from '@vue/reactivity'
import _ from 'lodash'
// 定义一个form表单数据，用以保存我们的表单数据
const props = defineProps({
  formConfig: {
    type: Object,
    required: true
  },
  formData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:formData'])
const formData = ref(_.cloneDeep(props.formData))
watch(
  formData,
  (newVal) => {
    // 每一次引用中的各个属性的变更就都能够触发回调了
    // 将最新的值通过emit然后再将深拷贝后的newVal传递给父组件
    emit('update:formData', _.cloneDeep(newVal))
  },
  {
    deep: true // 开启深度监视
  }
)
</script>

<style scoped lang="less"></style>
